<template>
  <div id="page-register-success" :style="{ 'background-image': background }">
    <div class="container-box">
      <h1 class="tc">注册成功</h1>

      <Row class="mt50 mb30">
        <Col span="4" offset="6">
          <Icon type="checkmark-circled" class="icon"></Icon>
        </Col>
        <Col span="13" offset="1">
          <p>恭喜您，注册成功！</p>
          <p><span class="red">{{ time }}</span>秒后自动跳转登录页面</p>
          <p><router-link to="/login">点击此处登录</router-link></p>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
  import _ from 'underscore'

  export default {
    name: 'page-register-succsss',
    data () {
      return {
        time: 3
      }
    },
    computed: {
      background: () => {
        let path = `http://image.1m5bike.com/image/jpg/public/bj${_.random(1, 6)}.jpg`
        return `url(${path})`
      }
    },
    methods: {
      goLogin () {
        this.$router.push({ path: '/login' })
      },
      timer () {
        if (this.time > 1) {
          this.time --
          setTimeout(this.timer, 1000)
        } else {
          this.goLogin()
        }
      }
    },
    mounted () {
      setTimeout(() => {
        this.timer()
      }, 500)
    }
  }
</script>

<style lang="less">
  #page-register-success {
    background: no-repeat center center;
    background-size: cover;
    position: absolute;
    background-image: url(../../../assets/images/pages/register/bg.jpg);
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    overflow: auto;

    .container-box {
      width: 600px;
      height: auto;
      padding: 20px 30px;
      margin: 0 auto;
      margin-top: 100px;
      margin-bottom: 20px;
      z-index: 99;
      background-color: #fff;
      border-radius: 2px;
      box-sizing: border-box;

      h1 {
        font-size: 24px;
        font-weight: normal;
        margin-top: 0px;
        margin-bottom: 20px;
        color:#333C48;
        font-weight: bold;
      }

      .icon {
        font-size: 80px;
        color: #19be6b
      }

      a {
        color: #19be6b
      }
    }
  }
</style>
